<template>
  <common-fieldset :title="$t('mes.currentOperation')" class="color1">
    <div class="row-wrapper">
      <div class="image-box">
        <img :src="url" v-show="url" :style="imgStyle">
      </div>
      <p class="text color1 " :style="textStyle">
        {{ name }}
      </p>
    </div>
  </common-fieldset>
</template>

<script>
import commonFieldset from '@/components/common/commonFieldset'

export default {
  name: 'processFieldset',
  components: { commonFieldset },
  props: {
    url: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    textStyle: {
      Object
    },
    imgStyle: {
      Object
    }
  }
}
</script>
<style lang="scss" scoped>
.row-wrapper {
  white-space: nowrap;
  display: flex;
  flex-direction: row;

  .image-box {
    text-align: center;
    padding-top: 5px;
    padding-left: 5px;
    flex: 0 0 40%;
    border-right: 1px solid #e3e3e3;

    img {
      height: 70px
    }
  }

  .text {
    flex: 1;
    margin: 0 0 0 5px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    text-align: center;
    word-wrap: break-word;
    white-space: break-spaces;
  }
}
</style>
